import React from 'react'
import { useEffect, useState } from 'react'
import dcss from "../css/detail.module.css"
import Left from '../components/Left.jsx'
import axios from 'axios'
import loadable from "../../loadable"
const Zixun = loadable(() => import('../components/Zixun.jsx'))


const Detail = (props) => {

    const [data, setdata] = useState([])
    const [num, setnum] = useState(0)
    const [zixun, setzixun] = useState([])
    // console.log(props.location.state.brandName,1111111111111);
    //详情页
    useEffect(async () => {
        await axios(`/tyj/detail?brandName=${props.location.state.brandName}`).then((res) => {
            // console.log(res.data);
            setdata(res.data)
        })
    }, [])

    //资讯
    axios(`/tyj/zixun?brandName=${props.location.state.brandName}`).then((res) => {
        // console.log(res.data, 777777777);
        if (res.data == null) {
            let word = "暂无内容，我们在努力创作中。"
        } else {
            setzixun(res.data);
            // console.log(zixun,6666666);
        }
    })

    const changenum = (index) => {
        setnum(index);
    }

     
    const isLogin=window.JSON.parse(window.localStorage.getItem("user"))//获得用户的登录信息
    //关注
    let flag = false;
    const guanzhu = (brandname,userid) => {
        // console.log(brandname);
        axios.get("/tyj/guanzhu",{params:{brandName:brandname,userId:userid}}).then((res)=>{
                console.log(res);
           
                })
        
    }
    return (
        <div className={dcss.detail}>
            {data.map((el, index) => {
                return (
                    <div key={index}>
                        <div className={dcss.brand} >
                            <img src={el.logo} alt="" className={dcss.touxiang} />
                            <div className={dcss.text}>
                                <div className={dcss.name}>{el.brandName}</div>
                                <p className={dcss.miaoshu}>{el.summary}</p>
                                <span className={dcss.hangye}>行业：{el.type}</span>
                                <span className={dcss.city}>城市：{el.city}</span>
                            </div>
                            <div className={dcss.right}>
                                <div className={dcss.fensi_box}>
                                    <div className={dcss.fsnum}>{el.fans}</div>
                                    <div className={dcss.fensi}>粉丝</div>
                                </div>
                                <button className={dcss.guanzhu} onClick={() => guanzhu(el.brandName,isLogin.userId)} >关注</button>
                                {/* <button className={flag==true?dcss.yguanzhu:dcss.guanzhu} onClick={() => guanzhu()} >已关注</button> */}
                            </div>
                        </div>
                        <div className={dcss.content_box}>
                            <div className={dcss.content_left}>
                                <div className={dcss.selection}>
                                    <p className={num == 0 ? dcss.p1 : ''} onClick={() => changenum(0)}>资讯</p>
                                    <p className={num == 1 ? dcss.p1 : ''} onClick={() => changenum(1)}>专题</p>
                                </div>
                                <div className={dcss.zixun_box}>
                                    {/* 这里写收到的资讯或者专题 */}
                                    <Zixun zixundata={zixun}></Zixun>
                                </div>
                            </div>

                            <div className={dcss.content_right}>
                                <Left></Left>
                            </div>
                        </div>
                    </div>
                )
            })}
        </div>

    )
}

export default Detail